<template>
  <div class="life-container">
    <div class="header flex justify-content-space-between align-center">
      <el-input v-model="tableDataPage.activityAddress" class="responsive-input" placeholder="搜索活动主题、地点" :prefix-icon="Search"/>
      <el-button  type="primary" icon="Search" @click="handleQuery" style="margin-left: 12px">搜索</el-button>
      <el-button  type="primary" icon="Plus" @click="addActive">新建活动</el-button>
    </div>
    <div class="card-wrapper flex justify-content-space-between align-center" style="margin-top: 20px;">
      <div class="card-item flex flex-auto" style="border-radius: 5px;padding: 30px 20px">
         <img src="../../../assets/smart/本月已完成活动.png" style="width: 50px;height: 50px">
         <div class="flex-auto" style="padding-left: 15px;color: #6A727D">
             <div>本月已完成活动</div>
             <div class="flex align-center">
             <img src="../../../assets/smart/上升.png" style="width: 20px;display: block;margin-right: 5px" alt="">
             <div>较上月增长{{activityCardInfo.monthEndActivityRatio}}%</div>
           </div>
         </div>
         <div style="font-size: 36px;font-weight: bolder;color: #333">{{activityCardInfo.monthEndActivityCount}}</div>
       </div>
      <div class="card-item flex flex-auto" style="margin: 0 20px;padding: 30px 20px;border-radius: 5px">
        <img src="../../../assets/smart/本月待开展活动.png" alt="" style="width: 50px;height: 50px" >
        <div class="flex-auto" style="padding-left: 15px;color: #6A727D">
          <div>本月待开展活动</div>
          <div class="flex align-center">
            <img src="../../../assets/smart/时间日期_时间_time.png" style="width: 20px;display: block;margin-right: 5px" alt="">
            <div>近期待开展</div>
          </div>
        </div>
        <div style="font-size: 36px;font-weight: bolder;color: #333">{{activityCardInfo.monthWaitActivityCount}}</div>
      </div>
      <div class="card-item flex flex-auto"  style="border-radius: 5px;padding: 30px 20px">
        <img src="../../../assets/smart/本月所有活动.png" alt="" style="width: 50px;height: 50px" >
        <div class="flex-auto" style="padding-left: 15px;color: #6A727D">
          <div>本月所有活动</div>
          <div class="flex align-center">
            <img src="../../../assets/smart/折线图.png" style="width: 20px;display: block;margin-right: 5px" alt="">
            <div>进行中{{activityCardInfo.monthConductActivityCount}}个</div>
          </div>
        </div>
        <div style="font-size: 36px;font-weight: bolder;color: #333">{{activityCardInfo.monthActivityCount}}</div>
      </div>
    </div>
    <div class="card-wrapper">
      <div style="font-size: 22px;color: #333333;font-weight: bolder;margin-top: 20px">活动类型</div>
      <!-- 卡片 -->
      <el-row :gutter="20">
        <el-col  v-for="(item, index) in activityList" :key="index" class="hover-container" style="perspective: 1000px;position: relative;margin-top: 20px;" :xs="24" :sm="12" :md="12" :lg="6">
          <el-card  class="padding-top-bottom-16" style="padding:20px 30px;">
            <div class="flex justify-content-center align-center" style="height: 60px;width: 70%;margin: 0 auto">
              <img :src="item.imgUrl" style="width: 100%;display: block" alt="">
            </div>
            <div class="active-type-title">{{item.title}}</div>
            <div class="active-type-desc">{{item.desc}}</div>
            <el-button  type="primary" style="width: 100%;height: 45px;font-size: 16px" @click="addActive(item.title)">{{item.btnText}}</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="table-container padding-20" style="margin-top: 20px;border-radius: 10px" >
      <div style="font-size: 22px;color: #333333;font-weight: bolder;margin-top: 20px">近期活动</div>
      <el-table :data="activities" style="width: 100%;margin-top: 20px;padding-bottom: 20px">
        <el-table-column label="活动主题" align="center">
          <template #default="{ row }">
            <div class="activity-title flex align-center">
              <img :src="getActivityTypeName(row.activityTypeId)"  style="width: 40px;height: 40px;display: block" alt="">
              <div style="padding-left: 20px">
                <div style="font-weight: bolder">{{ row.activityName }}</div>
                <div style="color: #999">{{ row.activitySummary }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时间地点" align="center">
          <template #default="{ row }">
            <div style="color: black;">{{ row.activityStartTime }}</div>
            <div style="color: #999">{{ row.activityAddress }}</div>
          </template>
        </el-table-column>
        <el-table-column label="参与情况" align="center">
          <template #default="{ row }">
            <div style="color: black">{{ row.participation }}</div>
            <div style="color: #999">{{ row.attendanceRate }}</div>
          </template>
        </el-table-column>

        <el-table-column label="活动状态" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(getActivityStatus(row.activityStartTime,row.activityEndTime).status)" size="small">
              {{ getActivityStatus(row.activityStartTime, row.activityEndTime).desc }}
            </el-tag>
          </template>
        </el-table-column>


        <el-table-column label="操作"  align="center">
          <template #default="{ row }">
            <el-button size="small" icon="View" text @click="handleView(row)" >查看</el-button>
            <el-button size="small" icon="edit" text type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" text type="primary" @click="handleSign(row)">签到管理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="position:relative;padding-bottom: 20px">
        <pagination
            :total="tableDataPage.totalCount"
            v-model:page="tableDataPage.pageNumber"
            v-model:limit="tableDataPage.pageSize"
            @pagination="getTableDataPageList" />
      </div>
    </div>
    <!-- 活动创建&编辑 -->
    <CreateActivityDialog  ref="createActivityDialogRef" v-model="dialogVisible" @save="handleSave"/>
    <SignDialog ref="signDialogRef" v-model="signDialog" />
    <!-- 活动详情 -->
    <ActivityDetailDialog  ref="activeDetailRef"  v-model="detailDialog" :activity="currentActivity" @edit="handleEditDetail" @sign-manage="handleSignManageDetail"/>

  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Search,Plus } from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
import CreateActivityDialog from './component/CreateActivityDialog.vue';
import ActivityDetailDialog from './component/ActivityDetailDialog.vue';
import SignDialog from './component/SignDialog.vue';

import {getActivityType, getPBActivityCount, getPBActivityList} from "@/api/life/relationship.js";
const activityTypeList = ref([]);
const dialogVisible = ref(false);
const createActivityDialogRef = ref(null);
const activeDetailRef = ref(null);
const signDialogRef = ref(null);
const signDialog = ref(false);
const activityList = [
  {
    title: '三会一课管理',
    desc: '支委会、党小组会、党员大会、党课',
    btnText: '创建活动',
    bgColor: '#fdeeed', // 卡片背景色
    imgUrl: new URL('@/assets/smart/三会一课管理.png', import.meta.url).href,
    iconClass: 'el-icon-user-solid' // Element Plus 图标类名，也可换自定义图标
  },
  {
    title: '主题党日活动',
    desc: '活动策划、党员报名、记录上传、宣传报道',
    btnText: '创建活动',
    bgColor: '#e9f1fd',
    imgUrl: new URL('@/assets/smart/主题党日活动.png', import.meta.url).href,
    iconClass: 'el-icon-flag'
  },
  {
    title: '公益与社会责任',
    desc: '党支部组建服务队，定期开展义诊、健康宣教',
    btnText: '创建活动',
    bgColor: '#f9eefa',
    imgUrl: new URL('@/assets/smart/公益与社会责任.png', import.meta.url).href,
    iconClass: 'el-icon-chat-dot-round'
  },
  {
    title: '会议签到管理',
    desc: '二维码签到、定位签到、人工补录、签到统计',
    btnText: '进入管理',
    bgColor: '#fdf6d9',
    imgUrl: new URL('@/assets/smart/会议签到.png', import.meta.url).href,
    iconClass: 'el-icon-menu'
  }
];

// 活动卡片信息
const activityCardInfo = ref({
  monthEndActivityCount: 0,
  monthEndActivityRatio: 0,
  monthWaitActivityCount: 0,
  monthActivityCount: 0,
  monthConductActivityCount: 0
});

// 模拟数据 - 活动表格
const activities = ref([]);

// 活动列表请求参数
const tableDataPage = ref({
      pageNumber: 1, // 当前页
      activityName:"",  // 活动名称
      activityAddress:"",  // 活动地点
      totalCount:0,
      pageSize:10,
      totalPages:0
 });

// 查看操作
const handleView = (row) => {
   if (getActivityStatus(row.activityStartTime, row.activityEndTime).status == 2){
       detailDialog.value = true;
      nextTick(() => {
       if (activeDetailRef.value) {
          activeDetailRef.value.loadActivityDetail(row.id);
       }
     });
   }else {
      ElMessage.error(`活动未结束,无法查看活动详情！`)
   }
};

// 签到操作
const handleSign = (row) => {
  signDialog.value = true;
  nextTick(() => {
    if (signDialogRef.value) {
      signDialogRef.value.loadSignList(row.id);
    }
  });
};

// 编辑操作
const handleEdit = (row) => {
  dialogVisible.value = true;
  nextTick(() => {
    if (createActivityDialogRef.value) {
      createActivityDialogRef.value.loadActivityDetails(row.id);
    }
  });
};

const addActive = (type)=>{
   if (type =='会议签到管理'){
        signDialog.value = true;
   }else {
       dialogVisible.value = true;
   }
};
const handleSave = () => {
  getTableDataPageList({page:1,limit:10})
};
const detailDialog = ref(false);
const currentActivity = {
  title: '学习贯彻党的二十大精神专题研讨会',
  type: 'theme',
  time: '2025年11月15日 14:00 - 17:00\n星期三下午',
  location: '市委党校 3号楼 201会议室\n北京市海淀区大有庄100号',
  content: '<p>本次专题研讨会旨在深入学习贯彻医院党建工作精神，全面提升医疗服务质量...</p>',
  images: [
    '/images/activity1.jpg',
    '/images/activity2.jpg',
    '/images/activity3.jpg'
  ],
  files: [
    { name: '党的二十大精神学习材料.pdf', size: '3.2 MB' },
    { name: '研讨会发言提纲.docx', size: '1.5 MB' }
  ],
  responsible: {
    name: '张建国',
    title: '党支部书记'
  },
  totalCount: 48,
  leaveCount: 3,
  signRate: 93.3,
  checkedCount: 45,
  participants: [
    '王卫东', '李红梅', '陈志强', '刘芳',
    '赵明', '周建华', '黄伟', '吴晓丽',
    '郑国强', '孙丽华', '马建军', '林小燕',
    '张晓峰', '徐海燕', '杨光', '朱明亮',
    '程志远', '曹梅', '韩雪', '江涛',
    '谢婷婷', '潘建国', '魏巍', '冯小刚',
    '董华', '梁红', '邓超', '唐军',
    '萧敏', '许婷', '范海峰', '金明'
  ]
};
// API对接
const getPActivityList = async (requestData) => {
  const { pageNumber,activityAddress,pageSize,activityName} = requestData;
  let result = await getPBActivityList({ pageNumber,activityAddress,pageSize,activityName});
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    const { items,totalCount,totalPages} = data;
    tableDataPage.value.totalCount = totalCount;
    tableDataPage.value.totalPages = totalPages;
    activities.value = items;
  }else {
    ElMessage({type: 'error', message: '活动列表获取失败！'});
  }
}

// 获取活动面板信息
const getActivityCount = async () => {
  let result = await getPBActivityCount();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
     activityCardInfo.value = data
  }
}

// 分页信息
const getTableDataPageList = (pageData) => {
  tableDataPage.value.pageNumber = pageData.page;
  tableDataPage.value.pageSize = pageData.limit;
  getPActivityList(tableDataPage.value); // 分页后筛选
};

// 搜索
const handleQuery = ()=>{
  tableDataPage.value.pageNumber = 1;
  getPActivityList(tableDataPage.value); // 重新查询数据
};

const getStatusType = (status) => {
  const statusMap = {
    0: 'info',    // 未开始
    1: 'success', // 进行中
    2: 'warning'  // 已结束
  };
  return statusMap[status] || 'info';
};
const getActivityStatus = (newStartTime, newEndTime) => {
  if (!newStartTime || !newEndTime) {
    return { status: 0, desc: "未开始" };
  }
  const now = new Date();
  const startDate = new Date(newStartTime);
  const endDate = new Date(newEndTime);
  if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
    return { status: 0, desc: "日期无效" };
  }
  if (now < startDate) {
    return { status: 0, desc: "未开始" };
  } else if (now >= startDate && now <= endDate) {
    return { status: 1, desc: "进行中" };
  } else if (now > endDate) {
    return { status: 2, desc: "已结束" };
  }
}
const getActivityTypeList = async () => {
  let result = await getActivityType();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
     activityTypeList.value = data;
  }
}
// 根据活动类型ID获取活动类型名称
const getActivityTypeName = (activityTypeId) => {
  const imageMap = {
    '3a1bbe7a-6ae8-2bac-2787-b265fdb9eb1a': new URL('../../../assets/smart/三会一课图标.png', import.meta.url).href,
    '3a1bbe7a-6ae8-2bac-2787-b265fdb9eb2a': new URL('../../../assets/smart/主题党日图标.png', import.meta.url).href,
    '3a1bbe7a-6ae8-2bac-2787-b265fdb9eb3a': new URL('../../../assets/smart/公益活动图标.png', import.meta.url).href
  };
  return imageMap[activityTypeId] ;
};


const handleEditDetail = () => {
  console.log('活动详情......');
};
const handleSignManageDetail = () => {
  console.log('签到管理反馈');
};


// 获取活动列表
getPActivityList(tableDataPage.value);
getActivityCount();
getActivityTypeList();


</script>
<style lang='scss' scoped>
.life-container {
  height: calc(100% - 40px);
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px;
  border-radius: 5px;
  .header {
    background-color: #FFFFFF;
    padding: 20px 20px;
    border-radius: 5px;
  }
  .card-wrapper{
     border-radius: 5px;
    .card-item{
      background-color: #FFFFFF;
      padding: 20px 20px;
    }
    .active-type-title{
       font-size: 18px;
       font-weight: bolder;
       padding: 10px 0;
    }
    .active-type-desc{
      color: #333333;
      padding:0 0 10px 0;
      color: #999;
    }
  }
  .table-container{
     background-color: #FFFFFF;
  }
  .icon-box{

  }


}


</style>
